<script setup>
    import { onMounted, reactive, ref } from 'vue'
    import MembershipTrendsChart from './chartComponent/homePage/MembershipTrendsChart.vue';
    import MonthlyRevenueChart from './chartComponent/homePage/MonthlyRevenueChart.vue';
    import MembershipCardChart from './chartComponent/homePage/MembershipCardChart.vue';
    
    const homeForm = ref({
        totalMembers: '23',
        activeUsers: '9',
        totalReservations: '16'
    })

    const refreshData = () => {
        // TODO: 刷新数据
        console.log('刷新数据')
    }
</script>

<template>
    <div class="home-container">
        <el-form>
            <el-row :gutter="24" :model="homeForm" class="home-header">
                <el-col :span="6">
                    <el-card class="home-card">
                        <div class="stat-box">
                            <div class="number">{{ homeForm.totalMembers }}</div>
                            <div class="card-description">会员总数</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="home-card">
                        <div class="stat-box">
                            <div class="number">{{ homeForm.activeUsers }}</div>
                            <div class="card-description">活跃用户(近一个月有过约课的用户)</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="home-card">
                        <div class="stat-box">
                            <div class="number">{{ homeForm.totalReservations }}</div>
                            <div class="card-description">预约总数</div>
                        </div>
                    </el-card>
                </el-col>
                    <el-col :span="6">
                    <el-button type="primary" @click="refreshData" class="refresh-button" round size="large">
                        刷新数据
                    </el-button>
                </el-col>
            </el-row>

            <!-- 图表部分 -->
            <el-row class="home-charts">
                <el-col :span="24" style="margin-bottom: 20px;">
                    <el-card style="width: 1100px;">
                        <MembershipTrendsChart />
                    </el-card>
                </el-col>

                <el-col :span="24" style="margin-bottom: 20px;">
                    <el-card style="width: 1100px;">
                        <MonthlyRevenueChart />
                    </el-card>
                </el-col>

                <el-col :span="24" style="margin-bottom: 20px;">
                    <el-card style="width: 1100px;">
                        <MembershipCardChart />
                    </el-card>
                </el-col>
            </el-row>
        </el-form>
        
    </div>
</template>

<style scoped>
    .home-container {
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .home-header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
        height: 100%;
        width: 1300px;
    }

    .home-card {
        align-items: center;
        margin-right: 60px;
        width: 250px;
        background-color: #ffffff;
        transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
    }

    /* 悬停时变色 */
    .home-card:hover {
        background-color: #caddff; /* 更浅的背景色 */
        cursor: pointer;
        transform: translateY(-2px); /* 微微抬起 */
    }

    .card-description {
        font-size: 0.8em;
        color: #999999e0;
    }

    .number {
        font-size: 2em;
        font-weight: bold;
        color: #3b3c51;
    }

    .refresh-button {
        background-color: #6f76ff;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        font-size: 1.2em;
        transition: background-color 0.3s, transform 0.2s;
    }

    .refresh-button:hover {
        background-color: #3b83ff;
        transform: translateY(-2px);
    }

    .refresh-button:active {
        background-color: #0152ff;
        transform: translateY(2px);
    }
</style>